@import 'common';

$guideFontSize: .93vh;
$normalFontSize: 24px;
$titleFontSize: 1.39vh;

#content {
  width: 100%;
  height: 100%;
}

.App {
  width: 100%;
  height: 100%;
}

.App-header {
  width: 100%;
  height: 7vh;
  background: url("../images/title.png") center no-repeat;
  background-size: contain;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-around;
  align-items: center;
  position: relative;
  .title {
    font-size: 3.7vh;
  }
  .date, .time, .U3DEntry {
    font-size: 1.85vh;
    color: #0ff;
    position: absolute;
    top: 12%;
  }
  .date {
    left: 16.5%;
  }
  .time {
    // right: 16.5%;
  }
  .U3DEntry {
    // right: 1%;
    right: 19%;
  }
  .switch {
    position: absolute;
    top: 12%;
    right: 1vw;
    .switch-link {
      display: inline-block;
      width: 3vw;
      // height: 5vh;
      text-align: center;
      border: 1px solid rgb(0, 255, 255);
      border-radius: 0.3vw;
    }
  }
}

.App-content {
  width: 100vw;
  height: 93vh;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  margin-top: 1vh;

  div {
    //height: 100%;
  }

  .content-left,.content-center,.content-right {
    //margin-top: 1%;
  }

  .content-left {
    width: 24vw;
    margin-left: 1.3vw;
    position: relative;

    .left-center {
      background: url('../images/left-center.png') center no-repeat;
      background-size: 100% 100%;
      width: 100%;
      & > div:nth-child(2) {
        // margin: 1.85vh 0;
        margin: 0.55vh 0;
      }
    }

    .left-down {
      width: 100%;
      background: url('../images/left-down.png') center no-repeat;
      background-size: 100% 100%;
      & > div:nth-child(1) {
        margin-bottom: 1.85vh;
      }
    }

    /*.left-up {
      width: 130%;
      height: 12.2%;
      position: absolute;
      top: -1%;
      left: -15%;
      background: url("../images/left-up.png") center no-repeat;
      background-size: contain;
      z-index: -1;
    }

    .left-center {
      width: 120%;
      height: 37%;
      position: absolute;
      top: 11.5%;
      left: -10%;
      background: url('../images/left-center.png') center no-repeat;
      background-size: contain;
      z-index: -1;
    }

    .left-down {
      width: 107%;
      height: 43.5%;
      position: absolute;
      bottom: 4%;
      left: -3.5%;
      background: url('../images/left-down.png') center no-repeat;
      background-size: contain;
      z-index: -1;
    }*/

    & > div {
      //margin: 4% 0;
      margin: .6vh 0;
      padding: .6vh 0;
    }

    .content-left-tempHumiDust {
      width: 100%;
      height: 10.37vh;
      display: flex;
      flex-flow: row nowrap;
      // justify-content: space-between;
      justify-content: space-around;
      background: url('../images/left-up.png') center no-repeat;
      background-size: 100% 100%;

      div {
        width: 33%;
        height: 100%;
      }
      .temperature div:first-child {
        background: url("../images/temperature.png") center no-repeat;
        background-size: contain;
      }
      .humidity div:first-child {
        background: url("../images/humidity.png") center no-repeat;
        background-size: contain;
      }
      .dust div:first-child {
        background: url("../images/activation.png") center no-repeat;
        background-size: contain;
      }
      .temperature div:nth-child(2), .humidity div:nth-child(2), .dust div:nth-child(2) {
        width: 55%;
        height: 30%;
      }

    }

    .content-left-tempHumiTrend {
      width: 100%;
      height: 14.6vh;
    }

    .content-left-dustTrend {
      width: 100%;
      height: 14.6vh;
    }

    .content-left-energy {
      width: 100%;
      height: 5.56vh;
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-around;
      align-items: center;

      .energy {
        width: 40%;
        height: 3.7vh;
        background: url("../images/output.png") no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-flow: row nowrap;
        justify-content: center;
        align-items: center;

        .energy-title {
          height: auto;
          text-align: center;
          // margin-top: .7vh;
          font-size: .93vh;
        }

        .energy-data {
          height: auto;
          text-align: center;
          // margin-top: .7vh;
          font-size: 1.85vh;
          color: #fbff7f;
        }
      }
    }

    .content-left-lineStatus {
      width: 100%;
      //height: 8.15vh;
      .lineStatus-title {
        font-size: $titleFontSize;
        color: #00ffff;
        height: auto;
        //margin-top: 1.85vh;
        margin-bottom: 0.46vh;
        margin-left: 0.3vw;
      }

      .lineStatus-guide {
        text-align: right;
        margin-bottom: .93vh;
        margin-right: 1vw;
        height: auto;
        font-size: $guideFontSize;
        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-end;
        align-items: center;
        span {
          display: flex;
          flex-flow: row nowrap;
          justify-content: center;
          align-items: center;
          margin-left: 1.09vw;
          i {
            display: inline-block;
            width: 1vh;
            height: 1vh;
            border-radius: 1vh;
            margin-right: .26vw;
          }
          .running {
            background-color: #7fffaa;
          }
          .idle {
            background-color: #fbff7f;
          }
          .down {
            background-color: #ff4c76;
          }
          .offline {
            background-color: #535353;
          }
        }
      }

      .lineStatus-gantt {
        width: 90%;
        height: 2vh;
        margin: 0 auto;
        border-radius: 2rem;
        border: 1px solid #035ddc;
        position: relative;
        display: flex;
        flex-flow: row nowrap;
        justify-content: center;
        align-items: center;
        .dashed-line {
          position: absolute;
          top: 50%;
          left: 50%;
          margin-left: -50%;
          width: 99%;
          height: 0;
          border: 1px dashed #4f5e79;
          z-index: -1;
        }
        .gantt {
          width: 80%;
          height: 120%;
          display: flex;
          flex-flow: row nowrap;
          justify-content: flex-start;
          align-items: center;
          div {
            height: 120%;
          }
          div:first-child {
            border-radius: .3rem 0 0 .3rem;
          }
          div:last-child {
            border-radius: 0 .3rem .3rem 0;
          }
        }
      }

      .lineStatus-time {
        display: flex;
        height: auto;
        flex-flow: row nowrap;
        justify-content: space-around;
        margin-top: .93vh;
        font-size: $guideFontSize;
        span {
          display: inline;
          font-size: $titleFontSize;
        }
        .running {
          color: #7fffaa;
        }
        .idle {
          color: #fbff7f;
        }
        .down {
          color: #ff4c76;
        }
      }
    }

    .content-left-equipmentStatus {
      width: 100%;
      height: 28vh;
      //border: 1px solid pink;
      .orderID {
        height: auto;
        color: #00ffff;
        font-size: $titleFontSize;
        margin-bottom: 2vh;
        //margin-left: 0.8%;
        margin-left: 0.3vw;
      }

      .equipment-content {
        /*background: url("../images/status-background.png") 1rem 0 no-repeat;
        background-size: contain;*/
        width: 100%;
        height: 90%;
        //margin-left: 7%;
        display: flex;
        flex-flow: row nowrap;
        margin-left: 5%;
        // margin-top: 3.5vh;
      }

      .equipment-status-down {
        width: 10%;
        height: 55%;
        //margin-top: 10%; // 保证下箭头垂直居中对齐
        margin-top: 7%; // 保证下箭头垂直居中对齐
        margin-left: -5%;
        background: url("../images/equipment-status-down.png") left no-repeat;
        background-size: contain;
      }

      .equipmentStatus {
        height: 50%;
        display: flex;
        flex-flow: row wrap;
        justify-content: flex-start;
        .equipment-status-right {
          width: 10%;
          height: 60%;
          background: url("../images/equipment-status-right.png") center no-repeat;
          background-size: contain;
        }
        .equipment-status-left {
          width: 10%;
          height: 60%;
          background: url("../images/equipment-status-left.png") center no-repeat;
          background-size: contain;
        }

        .equipment {
          position: relative;
          width: 25%;
          display: flex;
          flex-flow: column nowrap;
          justify-content: flex-start;
          align-items: center;
          .equipment-img {
            display: inline-block;
            width: 100%;
          }

          .equipment-info {
            // width: 300%;
            height: auto;
            text-align: center;
            .equipment-info-box {
              display: flex;
              flex-flow: row nowrap;
              justify-content: flex-start;
              align-items: center;
            }
            div {
              height: auto;
              width: 100%;
              font-size: $guideFontSize;
              //display: none;
              // transform: scale(.7);//
            }
            .equipment-lamp {
              width: 1.5vh;
              height: 1.5vh;
              // width: 1.7vh;
              // height: 1.7vh;
              border-radius: 2vh;
              //background-color: #7fffaa;//
            }
          }

        }
      }
    }
  }

  .content-center {
    //width: 48vw;
    width: 48vw;
    position: relative;

    & > div {
      margin: .6vh 0;
      padding: .6vh 0;
    }

    .center-up {
      background: url("../images/center-up.png") center no-repeat;
      background-size: 100% 100%;
      width: 100%;
      // height: 39.6vh;
      height: 35.6vh;
      position: relative;
      .center-up-mask, .center-up-u3d {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
      }
      .center-up-mask {
        z-index: 999;
        background: transparent;
        cursor: pointer;
      }
      .center-up-u3d {
        z-index: 998;
      }
    }

    .linkageMap-title {
      height: auto;
      text-align: center;
      font-size: $titleFontSize;
      color: #00ffff;
      position: relative;
      margin: 1vh 0 .93vh 0;
      .linkageMap-title-guide {
        width: 70%;
        height: 100%;
        position: absolute;
        top: 0;
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        font-size: $guideFontSize;
        color: #fff;
        div {
          width: auto;
          margin-right: 1.04vw;
        }
        i {
          display: inline-block;
          width: 1vh;
          height: 1vh;
          border-radius: 1vh;
          margin: 0 .26vw;
        }
        .idle {
          background-color: #fbff7f;
        }
        .running {
          background-color: #7fffaa;
        }
        .wait {
          background-color: #fff;
        }
        .down {
          background-color: #ff4c76;
        }
      }
      .guide-left {
        left: 0;
        justify-content: flex-start;
      }
      .guide-right {
        right: 0;
        justify-content: flex-end;
        > div {
          display: flex;
          flex-flow: row nowrap;
          justify-content: center;
          align-items: center;
        }
      }
    }

    // .content-center-important {
    //   width: 100%;
    //   height: 55vh;
    //   background: url("../images/center-down.png") center no-repeat;
    //   background-size: 100% 100%;
    //   padding: 0 1vw;
    //   box-sizing: border-box;
    //   .important-up {
    //     width: 100%;
    //     height: auto;
    //     display: flex;
    //     flex-flow: row nowrap;
    //     justify-content: space-between;
    //     margin-top: 2%;
    //     & > div {
    //       width: 25%;
    //       height: auto;
    //       border-radius: 1rem;
    //       img {
    //         width: 100%;
    //       }
    //     }
    //     .important-arrow {
    //       width: 3%;
    //     }
    //   }
    //   .important-down {
    //     width: 100%;
    //     height: 50%;
    //     margin-top: 5%;
    //     position: relative;
    //     .important-forecast {
    //       width: 50%;
    //       height: 100%;
    //       & > div:nth-child(2) {
    //         display: none;
    //       }
    //     }
    //     .machine-parameter {
    //       width: 50%;
    //       height: 100%;
    //       & > div:nth-child(2) {
    //         display: none;
    //       }
    //     }
    //     .important-forecast-content {
    //       position: absolute;
    //       left: 18%;
    //       top: 5%;
    //       font-size: $guideFontSize;
    //       div {
    //         margin: 1rem 0;
    //       }
    //     }
    //   }
    // }

    .content-center-important {
      width: 100%;
      // height: 48vh;
      height: 52vh;
      background: url("../images/center-down.png") center no-repeat;
      background-size: 100% 100%;
      // border: 1px solid #2e81f5;
      // background-color: #142d4e;
      /*padding: 0 1vw;
      box-sizing: border-box;*/

      display: flex;
      flex-flow: row wrap;
      justify-content: space-around;
      align-items: center;

      .important-title {
        text-align: center;
        font-size: 1.39vh;
        margin-bottom: .5vh;
      }

      .ant-table, .ant-table-content, .ant-table-body, table, tbody, thead, th, th {
        border-radius: 0;
      }
      .ant-table-body {
        table {
          width: 100%;
          border-spacing: 0;
          border: 1px solid #2D6DB2;
        }
        td, th {
          color: #fff;
          text-align: left;
        }
        th {
          background: #245fb3;
          padding: 0;
          height: 2.92vh;
          font-size: 1.39vh;
          font-weight: 500;
        }
        td {
          // height: 2.31vh;
          height: 3.3vh;
          padding: 0;
          border-color: transparent;
          font-size: 1.11vh;
        }
        tbody {
          tr:nth-child(2n) {
            //background: #27508b;
            background: #182f52;
          }
          tr:nth-child(2n+1) {
            background: #182f52;
          }
        }
      }

      .primary-parameter {
        width: 28.13vw;
        // height: 18vh;
        height: 22vh;
        //border: 1px solid pink;
      }
      .arrow {
        width: 6vw;
        // height: 18vh;
        height: 22vh;
        //border: 1px solid pink;
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        align-items: center;
        > div {
          width: 130%;
          height: 20%;
          //border: 1px solid pink;
          background: url("../images/view-arrow.png") center no-repeat;
          background-size: contain;
        }
        > p {
          font-size: 1.2vh;
        }
      }
      .recipe-combine {
        width: 10.76vw;
        // height: 18vh;
        height: 22vh;
        //border: 1px solid pink;
        td, th {
          color: #fff;
          text-align: center;
        }
      }
      .best-recipe {
        // width: 48vw;
        width: 47vw;
        height: 25vh;
        //border: 1px solid pink;
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
        align-items: center;
        position: relative;
        .best-recipe-title {
          position: absolute;
          text-align: center;
          // top: -5%;
          top: 0;
          left: 50%;
          transform: translateX(-50%);
          font-size: 1.39vh;
        }
      }
      .primary-status, .self-healing {
        width: 23vw;
        height: 25vh;
        //border: 1px solid pink;
      }
      .self-healing {

      }
    }

    // 时序联动图一整张图片-start
    .linkageMap-content {
      width: 100%;
      height: 30vh;
      background: url("../images/linkageMap/map2.png") center no-repeat;
      background-size: contain;
      position: relative;
      &>img {
        position: absolute;
        display: inline-block;
        width: 8%;
        opacity: 1;
        // animation-name: imgAni;
        animation-duration: 1s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out;
      }
      @keyframes imgAni {
        0% {
          opacity: 0;
        }
        
        100% {
          opacity: 1;
        }
      }
      img:nth-child(1) {
        top: 5%;
        right: 34%;
      }
      img:nth-child(2) {
        top: 5%;
        left: 34%;
      }
      img:nth-child(3) {
        top: 5%;
        left: 11%;
      }
      img:nth-child(4) {
        top: 31%;
        left: 11%;
      }
      img:nth-child(5) {
        bottom: 31%;
        left: 11%;
      }
      img:nth-child(6) {
        bottom: 4%;
        left: 11%;
      }
      img:nth-child(7) {
        bottom: 4%;
        left: 34%;
      }
      img:nth-child(8) {
        bottom: 4%;
        right: 37.5%;
      }
      img:nth-child(9) {
        bottom: 4%;
        right: 29%;
      }
      img:nth-child(10) {
        bottom: 4%;
        right: 11%;
      }
      img:nth-child(11) {
        bottom: 42%;
        right: 11%;
      }
      img:nth-child(12) {
        top: 5%;
        right: 11%;
      }
      img:nth-child(13) {
        bottom: 31%;
        left: 34%;
      }
      img:nth-child(14) {
        top: 32%;
        left: 34%;
      }
      img:nth-child(15) {
        // bottom: 32%;
        bottom: 31%;
        right: 34%;
      }
      .agv,.robot {
        position: absolute;
        bottom: 8%;
        z-index: 1;
        height: auto;
        transform: scale(.5);
        font-size: 0.5vh;
      }
      .agv {
        left: 37%;
      }
      .robot {
        right: 10%;
      }
    }
    // .content-center-important {
    //   .important-up {
    //     margin-top: 0;
    //   }
    //   .important-down {
    //     height: 50%;
    //   }
    //   .important-title {
    //     color: #00ffff;
    //     height: auto;
    //     font-size: $titleFontSize;
    //     width: 100%;
    //     text-align: center;
    //     padding: 1vh 0 2vh 0;
    //   }
    // }
    // 时序联动图一整张图片-end

  }

  .content-right {
    width: 24vw;
    margin-right: 1.3vw;
    position: relative;
    overflow: hidden;

    #right-title {
      width: 2%;
      height: auto;
      position: absolute;
      top: 1%;
      left: 3%;
      background-color: transparent;
      color: #00ffff;
      font-size: $titleFontSize;
    }

    .right-center {
      background: url('../images/left-center.png') center no-repeat;
      background-size: 100% 100%;
      & > div:nth-child(2) {
        margin: 1.85vh 0;
      }
    }

    & > div {
      //margin: 1.85vh 0;
      margin: .6vh 0;
      padding: .6vh 0;
    }

    .content-right-yieldActPressure {
      width: 100%;
      height: 10.37vh;
      display: flex;
      flex-flow: row nowrap;
      // justify-content: space-between;
      justify-content: space-around;
      background: url("../images/right-up.png") center no-repeat;
      background-size: 100% 100%;

      div {
        width: 33%;
        height: 100%;
      }
      .yield div:first-child {
        background: url("../images/yield.png") center no-repeat;
        background-size: contain;
      }
      .activation div:first-child {
        width: 98% !important;
        height: 96% !important;
        background: url("../images/activation.png") center no-repeat;
        background-size: contain;
        margin-top: 3% !important;
      }
      .pressure div:first-child {
        background: url("../images/pressure.png") center no-repeat;
        background-size: contain;
      }
      .yield div:nth-child(2), .activation div:nth-child(2), .pressure div:nth-child(2) {
        width: 55%;
        height: 30%;
      }

    }

    .content-right-yieldActivation {
      width: 100%;
      height: 16.44vh;
    }

    .content-right-outputNoise {
      width: 100%;
      height: 3.7vh;
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-around;
      align-items: center;

      .output, .noise {
        width: 40%;
        height: 100%;
        display: flex;
        flex-flow: row nowrap;
        justify-content: center;
        align-items: center;
        background: url("../images/output.png") no-repeat;
        background-size: 100% 100%;
        font-size: $guideFontSize;

        span {
          //font-size: $titleFontSize;
          font-size: 1.85vh;
          color: #fbff7f;
        }
      }
    }

    .content-right-outputTrend {
      width: 100%;
      height: 14.58vh;
    }

    .content-right-IOT {
      width: 100%;
      height: 37vh;
      position: relative;
      background: url('../images/left-down.png') center no-repeat;
      background-size: 100% 100%;
      & > div {
        width: 60%;
        height: 3.47vh;
        display: flex;
        flex-flow: row;
        justify-content: center;
        align-items: center;
        border-radius: .5vh;
        color: #fff;
        font-size: 1.11vh;
      }
      & > div:nth-child(2n+1) {
        background-color: #255fb3;
      }
      .right-IOT-2 {
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-around;
        align-items: center;
        img {
          width: 3.5%;
        }
      }
      .right-IOT-3 {
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-around;
        align-items: center;
        background-color: transparent !important;
        div {
          width: 30%;
          height: 100%;
          background-color: #255fb3;
          border-radius: .5vh;
        }
      }
      .right-IOT-6 {
        img {
          width: 3.5%;
        }
      }
      .right-IOT-7 {
        height: 20%;
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        align-items: center;
        text-align: center;
        div {
          height: 100%;
        }
        .opc-client {
          width: 50%;
          background-color: #037BE3;
          border-radius: .5vh .5vh 0 0;
        }
      }
      .right-IOT-8 {
        img {
          width: 3.5%;
        }
      }
      .right-IOT-9 {
        width: 95%;
      }
      .right-IOT-10 {
        width: 95%;
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-around;
        align-items: center;
        margin-bottom: .5rem;
        img {
          width: 2.5%;
        }
      }
      .right-IOT-11 {
        width: 95%;
        background-color: transparent !important;
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-around;
        align-items: center;
        img {
          width: 15%;
        }
      }
      .IOT-guide {
        width: auto;
        display: block;
        position: absolute;
        right: 2%;
        top: 2%;
        font-size: $guideFontSize;
        & > div {
          height: auto;
          width: auto;
          display: flex;
          flex-flow: row nowrap;
          justify-content: center;
          align-items: center;
        }
      }
      .IOT-normal, .IOT-err {
        display: inline-block;
        width: 1vh;
        height: 1vh;
        border-radius: 1vh;
        margin: 0 .26vw;
      }
      .IOT-normal {
        background-color: #7fffaa;
      }
      .IOT-err {
        background-color: #ff4c76;
      }
    }
  }

}

.simple-App {
  .switch-simple {
    position: absolute;
    top: 12%;
    left: 1vw;
    .switch-link {
      display: inline-block;
      width: 3vw;
      // height: 5vh;
      text-align: center;
      border: 1px solid rgb(0, 255, 255);
      border-radius: 0.3vw;
    }
  }
}